<template>
  <view class="badge" :class="badgeClass" :style="badgeStyle">
    <!-- 徽章内容 -->
    <view
      v-if="showBadge"
      class="badge__content"
      :class="contentClass"
      :style="contentStyle"
    >
      <!-- 徽章文本 -->
      <text v-if="!isDot" class="badge__text">{{ displayText }}</text>

      <!-- 小红点样式 -->
      <view v-else class="badge__dot"></view>
    </view>

    <!-- 子元素插槽 -->
    <slot></slot>
  </view>
</template>

<script setup lang="ts">
import { computed } from 'vue'

// Props
interface Props {
  text?: string | number
  type?: 'primary' | 'success' | 'warning' | 'danger' | 'info'
  size?: 'small' | 'medium' | 'large'
  dot?: boolean
  max?: number
  showZero?: boolean
  hidden?: boolean
  backgroundColor?: string
  textColor?: string
  borderColor?: string
  borderWidth?: string
  customClass?: string
}

const props = withDefaults(defineProps<Props>(), {
  text: '',
  type: 'danger',
  size: 'medium',
  dot: false,
  max: 99,
  showZero: false,
  hidden: false,
  borderWidth: '1px',
  customClass: ''
})

// 计算属性
const isDot = computed(() => props.dot && !props.text)

const showBadge = computed(() => {
  if (props.hidden) return false
  if (isDot.value) return true
  if (!props.showZero && props.text === 0) return false
  return props.text !== undefined && props.text !== null
})

const displayText = computed(() => {
  const text = typeof props.text === 'number' ? props.text : parseInt(props.text as string) || 0
  if (props.max && text > props.max) {
    return `${props.max}+`
  }
  return text.toString()
})

const badgeClass = computed(() => {
  return [
    `badge--${props.size}`,
    {
      'badge--hidden': props.hidden
    },
    props.customClass
  ]
})

const contentClass = computed(() => {
  return [
    'badge-content',
    `badge-content--${props.type}`,
    {
      'badge-content--dot': isDot.value,
      'badge-content--bordered': props.borderColor
    }
  ]
})

const badgeStyle = computed(() => {
  const style: any = {}

  if (props.textColor && !isDot.value) {
    style.color = props.textColor
  }

  return style
})

const contentStyle = computed(() => {
  const style: any = {}

  if (props.backgroundColor) {
    style.backgroundColor = props.backgroundColor
  }

  if (props.borderColor) {
    style.borderColor = props.borderColor
    style.borderWidth = props.borderWidth
  }

  return style
})
</script>

<style lang="scss" scoped>
.badge {
  position: relative;
  display: inline-block;

  &__content {
    position: absolute;
    top: 0;
    right: 0;
    transform: translate(50%, -50%);
    z-index: 10;
    white-space: nowrap;
    border-radius: 10px;
    font-size: 12px;
    font-weight: 500;
    line-height: 1;
    padding: 0 6px;
    height: 18px;
    min-width: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-style: solid;
    box-sizing: border-box;
    transform-origin: 100% 0;
  }

  &__text {
    line-height: 1;
    transform: scale(0.8);
    transform-origin: center;
  }

  &__dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    transform: none;
    min-width: auto;
    padding: 0;
  }

  // 类型样式
  .badge-content--primary {
    background-color: #1890ff;
    color: #ffffff;
    border-color: #1890ff;
  }

  .badge-content--success {
    background-color: #52c41a;
    color: #ffffff;
    border-color: #52c41a;
  }

  .badge-content--warning {
    background-color: #faad14;
    color: #ffffff;
    border-color: #faad14;
  }

  .badge-content--danger {
    background-color: #ff4d4f;
    color: #ffffff;
    border-color: #ff4d4f;
  }

  .badge-content--info {
    background-color: #722ed1;
    color: #ffffff;
    border-color: #722ed1;
  }

  // 小点样式
  .badge-content--dot {
    &.badge-content--primary {
      background-color: #1890ff;
    }

    &.badge-content--success {
      background-color: #52c41a;
    }

    &.badge-content--warning {
      background-color: #faad14;
    }

    &.badge-content--danger {
      background-color: #ff4d4f;
    }

    &.badge-content--info {
      background-color: #722ed1;
    }
  }

  // 边框样式
  .badge-content--bordered {
    background-color: #ffffff !important;
    color: currentColor;
  }

  &--hidden {
    .badge__content {
      display: none;
    }
  }

  // 尺寸样式
  &--small {
    .badge__content {
      font-size: 10px;
      height: 16px;
      min-width: 16px;
      padding: 0 4px;

      .badge__text {
        transform: scale(0.75);
      }
    }

    .badge__dot {
      width: 6px;
      height: 6px;
    }
  }

  &--medium {
    .badge__content {
      font-size: 12px;
      height: 18px;
      min-width: 18px;
      padding: 0 6px;

      .badge__text {
        transform: scale(0.8);
      }
    }

    .badge__dot {
      width: 8px;
      height: 8px;
    }
  }

  &--large {
    .badge__content {
      font-size: 14px;
      height: 20px;
      min-width: 20px;
      padding: 0 8px;

      .badge__text {
        transform: scale(0.85);
      }
    }

    .badge__dot {
      width: 10px;
      height: 10px;
    }
  }
}

// 动画效果
.badge__content {
  animation: badgeZoom 0.3s ease-out;
}

@keyframes badgeZoom {
  0% {
    transform: translate(50%, -50%) scale(0);
    opacity: 0;
  }
  50% {
    transform: translate(50%, -50%) scale(1.2);
  }
  100% {
    transform: translate(50%, -50%) scale(1);
    opacity: 1;
  }
}

// 小点动画
.badge__dot {
  animation: dotPulse 1.5s ease-in-out infinite alternate;
}

@keyframes dotPulse {
  0% {
    transform: scale(1);
    opacity: 1;
  }
  100% {
    transform: scale(1.2);
    opacity: 0.8;
  }
}

// 状态徽章样式（当不包裹子元素时，作为独立徽章使用）
.badge:empty {
  .badge__content {
    position: static;
    transform: none;
    border-radius: 12px;
    min-width: auto;
    padding: 4px 8px;
    height: auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
}
</style>